<template>
  <div class="description">
    <div class="section">
      <div class="segment segment-1">
        <Row type="flex" :gutter="20">
          <Col>
            <div class="segment-title">当日供能量(千瓦时）</div>
            <span class="segment-label">{{ base.consume.day }}</span>
          </Col>
          <Col>
            <div class="segment-title">当月供能量(千瓦时）</div>
            <span class="segment-label">{{ base.consume.month }}</span>
          </Col>
          <Col>
            <div class="segment-title">当年供能量(千瓦时）</div>
            <span class="segment-label">{{ base.consume.year }}</span>
          </Col>
        </Row>
      </div>
    </div>
    <div class="section">
      <div class="segment segment-2">
        <Row type="flex" :gutter="20">
          <Col>
            <div class="segment-title">当日耗能量(千瓦时）</div>
            <span class="segment-label">{{ base.supply.day }}</span>
          </Col>
          <Col>
            <div class="segment-title">当月耗能量(千瓦时）</div>
            <span class="segment-label">{{ base.supply.month }}</span>
          </Col>
          <Col>
            <div class="segment-title">当年供能量(千瓦时）</div>
            <span class="segment-label">{{ base.supply.year }}</span>
          </Col>
        </Row>
      </div>
    </div>
    <div class="section">
      <div class="segment segment-3">
        <Row type="flex" :gutter="20">
          <Col>
            <div class="segment-title">累计供能量(兆瓦时）</div>
            <span class="segment-label">{{ base.total.gnTotal }}</span>
          </Col>
          <Col>
            <div class="segment-title">累计耗能量(兆瓦时）</div>
            <span class="segment-label">{{ base.total.hnTotal }}</span>
          </Col>
          <Col>
            <div class="segment-title">转换率(%）</div>
            <span class="segment-label">{{ base.total.zhl }}</span>
          </Col>
        </Row>
      </div>
    </div>
  </div>
</template>

<script>
import { hotColdPipeWorkSystemOverview } from "@/api/scada";
export default {
  name: "description",
  props: {},
  data() {
    return {
      base: {
        consume: {
          day: 0,
          month: 0,
          year: 0
        },
        supply: {
          day: 0,
          month: 0,
          year: 0
        },
        total: {
          gnTotal: 0,
          hnTotal: 0,
          zhl: 0
        }
      }
    };
  },
  computed: {},
  created() {},
  mounted() {
    hotColdPipeWorkSystemOverview().then((res) => {
      const { code, result } = res;
      if (code === 200) {
        this.base.consume.day = result.gnToday || 0;
        this.base.consume.month = result.gnMonth || 0;
        this.base.consume.year = result.gnYear || 0;

        this.base.supply.day = result.ynToday || 0;
        this.base.supply.month = result.ynMonth || 0;
        this.base.supply.year = result.ynYear || 0;

        this.base.total.gnTotal = result.gnTotal || 0;
        this.base.total.hnTotal = result.hnTotal || 0;
        this.base.total.zhl = result.zhl || 0;
      }
    });
  },
  watch: {},
  methods: {},
  components: {}
};
</script>

<style scoped lang="scss">
.section + .section {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 2px dashed #f1f3f6;
}

.segment {
  padding-left: 80px;
  position: relative;
}
.segment::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 60px;
  height: 60px;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
}
.segment::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 60px;
  height: 60px;
  background-position: center;
  background-size: 32px;
  background-repeat: no-repeat;
}
.segment.segment-1::before {
  background-image: url("../../../../assets/img/coldHot/13.png");
}
.segment.segment-1::after {
  background-image: url("../../../../assets/img/coldHot/5.png");
}
.segment.segment-2::before {
  background-image: url("../../../../assets/img/coldHot/11.png");
}
.segment.segment-2::after {
  background-image: url("../../../../assets/img/coldHot/10.png");
}
.segment.segment-3::before {
  background-image: url("../../../../assets/img/coldHot/12.png");
}
.segment.segment-3::after {
  background-image: url("../../../../assets/img/coldHot/6.png");
}

.segment-title {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  font-weight: 400;
  color: #333333;
}
.segment-label {
  font-size: 24px;
  color: #333;
}
</style>
